<template>
    <div>
        <div style="height: 610px;">
            <!-- 图片上传组件辅助-->
            <el-upload
                class="avatar-uploader"
                :action="getUploadUrl()"
                name="img"
                :headers="header"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :before-upload="beforeUpload">
            </el-upload>

            <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
                <!-- 自定义toolar -->
                <div id="toolbar" slot="toolbar">
                    <!-- Add a bold button -->
                    <button class="ql-bold" title="加粗">Bold</button>
                    <button class="ql-italic" title="斜体">Italic</button>
                    <button class="ql-underline" title="下划线">underline</button>
                    <button class="ql-strike" title="删除线">strike</button>
                    <button class="ql-blockquote" title="引用"></button>
                    <button class="ql-code-block" title="代码"></button>
                    <button class="ql-header" value="1" title="标题1"></button>
                    <button class="ql-header" value="2" title="标题2"></button>
                    <!--Add list -->
                    <button class="ql-list" value="ordered" title="有序列表"></button>
                    <button class="ql-list" value="bullet" title="无序列表"></button>
                    <!-- Add font size dropdown -->
                    <select class="ql-header" title="段落格式">
                        <option selected>段落</option>
                        <option value="1">标题1</option>
                        <option value="2">标题2</option>
                        <option value="3">标题3</option>
                        <option value="4">标题4</option>
                        <option value="5">标题5</option>
                        <option value="6">标题6</option>
                    </select>
                    <select class="ql-size" title="字体大小">
                        <option value="10px">10px</option>
                        <option value="12px">12px</option>
                        <option value="14px">14px</option>
                        <option value="16px" selected>16px</option>
                        <option value="18px">18px</option>
                        <option value="20px">20px</option>
                    </select>
                    <select class="ql-font" title="字体">
                        <option value="SimSun">宋体</option>
                        <option value="SimHei">黑体</option>
                        <option value="Microsoft-YaHei">微软雅黑</option>
                        <option value="KaiTi">楷体</option>
                        <option value="FangSong">仿宋</option>
                        <option value="Arial">Arial</option>
                    </select>
                    <!-- Add subscript and superscript buttons -->
                    <select class="ql-color" value="color" title="字体颜色"></select>
                    <select class="ql-background" value="background" title="背景颜色"></select>
                    <select class="ql-align" value="align" title="对齐"></select>
                    <button class="ql-clean" title="还原"></button>
                    <button class="ql-link" title="链接"></button>
                    <button class="ql-image" title="图片"></button>
                    <!-- You can also add your own -->
                </div>
            </quill-editor>
        </div>
    </div>
</template>

<script>
    import hljs from 'highlight.js'
    import {Quill, quillEditor} from 'vue-quill-editor'
    import imageResize from 'quill-image-resize-module'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    //引入font.css
    import '../assets/css/font.css'
    import {getCookie} from '../utility/util'

    Quill.register('modules/imageResize', imageResize)
    //自定义字体大小
    let Size = Quill.import('attributors/style/size')
    Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
    Quill.register(Size, true)

    // 自定义字体类型
    var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
        '宋体', '黑体'
    ];
    var Font = Quill.import('formats/font')
    Font.whitelist = fonts
    Quill.register(Font, true)

    export default {
        name: "eleEditor",
        components: {
            quillEditor
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            describe: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                content: '',
                editorOption: {
                    placeholder: "请输入",
                    theme: "snow", // or 'bubble'
                    modules: {
                        toolbar: {
                            container: '#toolbar',
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        // 触发input框选择图片文件
                                        document.querySelector('.avatar-uploader input').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        },
                        imageResize: {
                            displayStyles: {
                                backgroundColor: 'black',
                                border: 'none',
                                color: 'white',
                            },
                            modules: ['Resize', 'DisplaySize', 'Toolbar']
                        },
                    }
                },
                header: {
                    token: getCookie('token')
                },
                quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示

            }
        },
        mounted() {
        },
        computed: {
            contentCode() {
                return hljs.highlightAuto(this.content).value
            },
        },
        methods: {
            getUploadUrl() {
                return '/api/sys/oss/uploadImg';
            },
            onEditorBlur(editor) {
                // console.log('editor blur!', editor)
            },
            onEditorFocus(editor) {
                // console.log('editor focus!', editor)
            },
            onEditorReady(editor) {
                // console.log('editor ready!', editor)
            },

            onEditorChange({editor, html, text}) {//内容改变事件
                console.log("---内容改变事件---")
                this.content = html
                console.log(html)
            },
            // 富文本图片上传前
            beforeUpload() {
                // 显示loading动画
                this.quillUpdateImg = true
            },

            uploadSuccess(res, file) {
                // res为图片服务器返回的数据
                // 获取富文本组件实例
                let quill = this.$refs.myQuillEditor.quill;
                // 如果上传成功
                if (res.code === 0) {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片  res.url为服务器返回的图片地址
                    quill.insertEmbed(length, 'image', res.url);
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    this.$message.error('图片插入失败')
                }
                // loading动画消失
                this.quillUpdateImg = false
            },
            // 富文本图片上传失败
            uploadError() {
                // loading动画消失
                this.quillUpdateImg = false
                this.$message.error('图片插入失败')
            }

        },
        watch: {
            content: {
                deep: true,
                handler(val) {
                    this.$emit('input', val)
                }
            },
            value: {
                deep: true,
                handler(val) {
                    this.content = val;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .quill-editor,
    .quill-code {
        /*width: 50%;*/
        /*float: left;*/
    }

    .quill-code {
        height: auto;
        border: none;

        > .title {
            border: 1px solid #ccc;
            border-left: none;
            height: 3em;
            line-height: 3em;
            text-indent: 1rem;
            font-weight: bold;
        }

        > code {
            width: 100%;
            margin: 0;
            padding: 1rem;
            border: 1px solid #ccc;
            border-top: none;
            border-left: none;
            border-radius: 0;
            height: 30rem;
            overflow-y: auto;
        }
    }
</style>
